<template>
  <div class="Lattice">
    <div class="carousel">
      <img src="../../assets/GE/1.png" />
    </div>
    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <div class="listBox">
            <div v-for="(item, index) in list" :key="index" style="max-height: 200px;">
              <!-- 通讯录行主体部分 -->
              <div class="mainBox">
                <div class="leftP">
                  <div class="headp">
                    <img :src="item.attachList.length?picUrl(item.attachList[0].uploadPath) : require('../../assets/ggg/1.png')" />
                  </div>
                  <div class="text">
                    <div class="namePhone">
                      <p class="itemname">{{item.name}} <span>{{item.phone}}</span></p>
                    </div>
                    <div class="posArea">
                      <p class="item colorItem">职务: 网格长</p>
                      <p class="item qyname">{{"区域:"+ item.address}}</p>
                    </div>
                    <div class="fbBox">发布单位：<span>{{item.regionName}}</span></div>
                  </div>
                </div>
                <div class="phoneIcon" @click="callOut(item.phone)">
                  <img src="../../assets/GE/phone.png" />
                </div>
              </div>
              <van-divider />
            </div>
        
      </div>
      <van-pagination class="pages" v-model="currentPage" :page-count="allcount" force-ellipses @change="onLoad" />
    </div>
  </div>
</template>
<script>
  export default {
    name: "Lattice",
    data() {
      return {
        list: [],
        currentPage: 1,
        allcount: 1,
      };
    },
    created(){
      this.$nextTick(() => {
        this.onLoad();
      });
    },
    methods: {
      back() {
        this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
        this.$router.back(); // 路由向后退一步
      },
      // 获取网格员信息列表
      onLoad() {
        this.post("gridPersonStyle/load_public", {
            pageIndex: this.currentPage,
            pageSize: 10,
            dataAreaCode: sessionStorage.getItem("dataAreaCode") //370503100204 //sessionStorage.getItem("dataAreaCode")
            // dataAreaCode:'370503'//河口社区
            // dataAreaCode:'370503001003'//黄河社区
          })
          .then(res => {
            console.log(res.pageInfo.pageCount)
            console.log(Number(res.pageInfo.pageCount))
            this.allcount = Number(res.pageInfo.pageCount);
            this.list = res.array
          })
      },
      callOut(phoneNum) {
        this.$dialog
          .confirm({
            title: "拨打电话",
            message: "是否拨号：" + phoneNum
          })
          .then(() => {
            window.location.href = "tel://" + phoneNum;
          })
          .catch(() => {});
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "~@/smobile.scss";
  .Lattice {
    overflow-y: unset !important;
    .header {
      padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;
      position: absolute;
      width: $sm-img-per-max;
      height: 21px;
      background: $sm-bg-color;
      z-index: 2;
      display: flex;
      flex-direction: row nowrap;
      justify-content: flex-start;
      .backIcon {
        position: absolute;
        white-space: nowrap;
        height: $sm-icon-px-md;
        z-index: 4;
        .iconImage {
          height: $sm-icon-px-md;
          width: $sm-icon-px-md;
          transform: rotateY(180deg);
        }
      }
      .theme {
        position: absolute;
        font-weight: bold;
        width: $sm-img-per-max;
        text-align: center;
        white-space: nowrap;
        z-index: 3;
      }
    }
    .carousel {
      margin: 0;
      padding: 0;
      height: 28%;
      width: $sm-img-per-max;
      img {
        height: $sm-img-per-max;
        width: $sm-img-per-max;
        display: block;
      }
    }
    .outermostMargin {
      background: $sm-bg-color-grey;
      color: $sm-text-color;
      font-size: $sm-font-size-lg;
      overflow: auto;
      height: calc(100vh - 46px - 28%); // margin: 41px 0 0 0;
      .listBox {
        display: flex;
        flex-direction: column;
        padding: 20px;
        box-sizing: border-box;
        .van-divider.van-divider--hairline {
          display: none;
        }
        .mainBox {
          padding: 10px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          border: 1px solid #5cc099;
          background-color: $sm-bg-color;
          border-radius: 10px;
          margin-bottom: 20px;
          .leftP {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            .headp {
              img {
                display: block;
                height: $sm-img-size-xxl;
                max-width: 4.6rem;
                object-fit: cover;
                border-radius: 5px;
              }
            }
            .text {
              // height: $sm-img-size-xxxl;
              width: 80%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .namePhone {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                .itemname {
                  margin: 5px $sm-spaceing-block-mini $sm-spaceing-block-mini 15px;
                  font-weight: bold;
                  font-size: 18px;
                  span {
                    font-weight: 400;
                    color: grey;
                    font-size: 14px;
                    margin-left: 10px;
                  }
                }
                .item {
                  margin: 0 0 0 15px;
                  font-size: $sm-font-sizeVH-sm;
                  color: $sm-text-color-li;
                }
              }
              .posArea {
                display: flex;
                flex-direction: column;
                .colorItem.item {
                  color: #d87b00;
                  margin: 5px 0 0 15px;
                }
                .item {
                  width: 100%;
                  // height: 24px;
                  // display: flex;
                  // flex-direction: row;
                  margin: 0 0 0 15px;
                  font-size: 2.2vh;
                  color: $sm-text-color-li;
                  // overflow: hidden;
                  // text-overflow: ellipsis;
                  // white-space: nowrap;
                  // max-width: 120px;
                }
                .qyname{
                  width: 95%;
                  margin: 5px 0 0 15px;
                  font-size: 2.2vh;
                  color: $sm-text-color-li;
                  overflow: hidden;
                  text-overflow: clip;
                  // white-space: nowrap;
                }
              }
              .fbBox{
                margin-top: 5px;
                margin-left: 15px;
                color: $sm-text-color-li;
                font-size: 2.2vh;
                span{
                  font-size: $sm-font-size-sm;
                  background: #e5b03e;
                  padding: 3px 6px;
                  border-radius: 12px;
                  color: #ffffff;
                }
              }
            }
          }
          .phoneIcon {
            // position: absolute;
            // margin-right: 10px;
            width: 32px;
            // z-index: 10001;
            img {
              height: $sm-img-size-md;
            }
          }
        }
      }
      .pages {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 111;
        background: #ffffff;
      }
    }
  }
</style>